<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const toPath = (item: string) => {
  console.log(item);
  router.push({ name: item })
}
defineProps(["menus", "collapse"])
</script>
<template>
  <div class=''>
    <template v-for="menu in menus" :key="menu.path">
      <el-sub-menu :index="menu.path" v-if="menu.children && menu.children.length > 1">
        <template #title>
          <el-icon>
            <!-- 动态组件 -->
            <component :is="menu.meta.icon"></component>
          </el-icon>
          <span v-if="!collapse">{{ $t(menu.meta.title) }}</span>
        </template>
        <!-- 不知道为什么不能使用递归 -->
        <!-- 循环子菜单 -->
        <template v-for="menu2 in menu.children" :key="menu.path">
          <el-sub-menu :index="menu2.path" v-if="menu2.children && menu2.children.length > 1">
            <template #title>
              <el-icon>
                <!-- 动态组件 -->
                <component :is="menu2.meta.icon"></component>
              </el-icon>
              <span v-if="!collapse">{{ $t(menu2.meta.title) }}</span>
            </template>
          </el-sub-menu>
          <el-menu-item :index="menu2.path" @click="toPath(menu2.name)" v-else>
            <el-icon>
              <!-- 动态组件 -->
              <component :is="menu2.meta?.icon"></component>
            </el-icon>
            <span>{{ $t(menu.meta.title) }}</span>
          </el-menu-item>
        </template>
      </el-sub-menu>
      <el-menu-item v-else @click="toPath(menu.name)" :index="menu.path">
        <el-icon>
          <!-- 动态组件 -->
          <component :is="menu.meta?.icon"></component>
        </el-icon>
        <span v-if="!collapse">{{ $t(menu.meta.title) }}</span>
      </el-menu-item>
    </template>
  </div>
</template>
<style lang='less' scoped>
.el-sub-menu {
  .el-menu-item {
    background-color: #1f2d3d;
  }
}
</style>